<template>
    <div>
        <navigationBar
            :backType="2"
            navigationTitle="评价用户"
            :style="{ '--navigation-height': navigationHeight + 'px' }"
        />
        <view class="content">
            <view class="card">
                <view class="top">
                    <text class="title">普通标签</text>
                    <text class="tip"> 点击下方标签为客户评价 </text>
                </view>
                <view class="list">
                    <view
                        class="item"
                        :class="{ actives: item.selected }"
                        v-for="(item, index) in normal_arr"
                        :key="index"
                        @click="changeNormalTag(item)"
                    >
                        {{ item.name }}
                    </view>
                </view>
            </view>
            <view class="card">
                <view class="top">
                    <text class="title">负面标签</text>
                    <text class="tip"> 点击下方标签为客户评价 </text>
                </view>
                <view class="list">
                    <view
                        class="item"
                        :class="{ actives: item.selected }"
                        v-for="(item, index) in downside_arr"
                        :key="index"
                        @click="changeDownsideTag(item)"
                    >
                        {{ item.name }}
                    </view>
                </view>
            </view>
        </view>
        <view class="btns">
            <view class="btn" @click="submit"> 提交评价 </view>
        </view>
    </div>
</template>
<script>
import { getCommentList, evaluateUser } from "@/API/recruit.js";
export default {
    data() {
        return {
            navigationHeight: this.$navigationHeight,
            order_id: "",
            normal_arr: [],
            downside_arr: [],
            label_ids: [],
        };
    },

    onLoad(options) {
        this.order_id = options.order_id;

        this.getList();
    },

    watch: {},

    methods: {
        // 获取列表
        getList() {
            getCommentList().then((res) => {
                res.data.normal_arr.forEach((item) => {
                    item.selected = false;
                });
                res.data.downside_arr.forEach((item) => {
                    item.selected = false;
                });
                this.normal_arr = res.data.normal_arr;
                this.downside_arr = res.data.downside_arr;
            });
        },

        // 选择标签
        changeNormalTag(item) {
            item.selected = !item.selected;
            this.label_ids.findIndex((id) => id == item.id) == -1
                ? this.label_ids.push(item.id)
                : this.label_ids.splice(this.label_ids.indexOf(item.id), 1);

            console.log(this.label_ids);
        },
        changeDownsideTag(item) {
            item.selected = !item.selected;
            this.label_ids.findIndex((id) => id == item.id) == -1
                ? this.label_ids.push(item.id)
                : this.label_ids.splice(this.label_ids.indexOf(item.id), 1);

            console.log(this.label_ids);
        },

        // 提交
        submit() {
            if (this.label_ids.length == 0) {
                uni.showToast({
                    title: "请选择标签",
                    icon: "none",
                });
                return;
            }

            evaluateUser({
                order_id: this.order_id,
                label_ids: this.label_ids,
            }).then((res) => {
                uni.showToast({
                    title: res.msg,
                    icon: "none",
                });
                setTimeout(() => {
                    uni.navigateBack();
                }, 800);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    padding: 20rpx;
    box-sizing: border-box;
    .top {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        .title {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
        }
        .tip {
            font-size: 24rpx;
            color: #b0b0b0;
            margin-left: 20rpx;
        }
    }
    .list {
        display: flex;
        flex-wrap: wrap;
        .item {
            margin-right: 20rpx;
            margin-bottom: 20rpx;
            text-align: center;
            font-size: 24rpx;
            height: 46rpx;
            line-height: 46rpx;
            padding: 0 20rpx;
            border-radius: 23rpx;
            border: 2rpx solid #b0b0b0;
            color: #b0b0b0;
        }
    }
}
.card {
    background: white;
    padding: 20rpx;
    box-sizing: border-box;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: linear-gradient(90deg, #5d64ca 0%, #6f9bdf 100%);
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
.actives {
    background: #5d64ca;
    color: white !important;
}
</style>